<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人</el-breadcrumb-item>
    </el-breadcrumb>

    <el-link class="go_back" @click="goBack">返回</el-link>

    <el-card class="user_box">
      <el-row>
        <el-col>
          <div class="user_info">
            <el-avatar
              shape="square"
              :size="50 "
              :src="user.author.avatar_url"
            ></el-avatar>
            <span class="loginname">{{ user.author.loginname }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 收藏 -->
    <el-card class="user_collect">
      <div slot="header" class="clearfix">
        <span>{{ user.author.loginname }} 的收藏</span>
      </div>
      <!-- 内容 -->
      <el-row class="ul_list" v-if="collectArr.length">
        <el-col class="list_item" v-for="(item, index) in collectArr" :key="index">
          <div class="list_l" @click="goUser(item)">
            <el-avatar
              :size="50 "
              :src="item.author.avatar_url"
            ></el-avatar>
          </div>
          <div class="list_r">
            <div class="list_r_t" @click="goSection(item)">
              <el-tag type="success" size="small" v-if="item.top">置顶</el-tag>
              <el-link :underline="false" class="title_lk">{{ item.title }}</el-link>
            </div>
            <div class="list_r_b">
              <div class="user_info">
                <el-link :underline="false">{{ item.author.loginname }}</el-link>
                <span class="line">|</span>
                <span>{{ item.create_at | formatCDate }}</span>
                <span class="line">|</span>
                <el-tag size="small">{{ item.tab | formatClass }}</el-tag>
              </div>
              <div class="viewed">
                <el-link
                  :underline="false"
                  icon="el-icon-view"
                >{{ item.visit_count || 0 }}</el-link>
                <el-link
                  :underline="false"
                  icon="el-icon-chat-round"
                >{{ item.reply_count || 0 }}</el-link>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { Session } from '../../assets/js/lib'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      collectArr: [] // 用户收藏
    }
  },
  props: ['name', 'user'],
  mounted () {
    // debugger
    this.$store.commit('setUser', this.user)

    // console.log(this.users)

    var user = JSON.parse(Session.get('user') || '[]')

    if (!user.length) {
      user.push(this.user)
      Session.set('user', JSON.stringify(user))
    } else {
      const isExist = user.some(item => item.author.loginname === this.user.author.loginname)
      if (!isExist) {
        user.push(this.user)
        Session.set('user', JSON.stringify(user))
      }
    }

    const users = user.find(item => item.author.loginname === this.user.author.loginname)
    this.initTopicCol(users.author.loginname)
  },
  computed: {
    ...mapState(['users'])
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        var str = val.path.substr(11)
        this.loginTxt = str
        var user = JSON.parse(Session.get('user') || '[]')
        const userObj = user.find(t => t.author.loginname === str)
        this.user = userObj // 因为这里是 prop 属性 不能直接修改，会警告
        // this.$store.commit('setUser', userObj)
        // console.log(this.users, str)
        this.initTopicCol(str)
        this.$forceUpdate()
      },
      deep: true
    }
  },
  methods: {
    initTopicCol (name) {
      this.$http.get('/topic_collect/' + name)
        .then(res => {
          this.collectArr = res.data.data
          // console.log(this.collectArr)
        })
      this.$forceUpdate()
    },
    goSection (item) {
      // console.log(item)
      // item.visit_count++
      // this.$store.commit('setTopicCount', item)
      document.documentElement.scrollTop = document.body.scrollTop = 0
      this.$router.push({
        name: 'section',
        params: {
          id: item.id,
          topicLs: item
        }
      })
    },
    exist () {
    },
    // 去用户详情页面
    goUser (item) {
      this.$router.push({
        name: 'user',
        params: {
          name: item.author.loginname,
          user: item
        }
      })

      var user = JSON.parse(Session.get('user') || '[]')
      if (user) {
        const isExist = user.some(t => t.author.loginname === item.author.loginname)
        if (!isExist) {
          user.push(item)
          Session.set('user', JSON.stringify(user))
        }
      } else {
        user.push(item)
        Session.set('user', JSON.stringify(user))
      }
      if (!user.length) {
        user.push(item)
        Session.set('user', JSON.stringify(user))
      } else {
        const isExist = user.some(item => item.author.loginname === this.user.author.loginname)
        if (!isExist) {
          user.push(item)
          Session.set('user', JSON.stringify(user))
        }
      }

      const users = user.find(t => t.author.loginname === item.author.loginname)
      this.initTopicCol(users.author.loginname)
      this.$forceUpdate()
    },
    goBack () {
      this.$router.go(-1)
    }
  }

}
</script>

<style lang="less" scoped>
.user_box, .user_collect {
  margin-top: 20px;
}
.user_info {
  display: flex;
  align-items: center;
  .loginname {
    margin-left: 10px;
  }
}

.go_back {
  margin-top: 20px;
}

/* 主体区域内容 */
.list_item {
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  padding-top: 18px;
  padding-bottom: 18px;
  cursor: pointer;
  &:first-child {
    padding-top: 0;
  }
  .list_l {
    margin-right: 8px;
  }
  .list_r {
    flex: 1;
    .list_r_t .el-tag {
      margin-right: 10px;
    }
    .list_r_t .el-link {
      font-size: 16px;
      font-weight: 700;
    }
    .list_r_b {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }

    .list_r_b .user_info {
      display: flex;
      align-items: center;
      color: #5c5c5c;
    }

    .list_r_b .user_info .line {
      padding: 0 10px;
    }

    .list_r_b .viewed > .el-link {
      margin-right: 10px;
    }
  }
}

</style>
